<style scoped lang="less">
	.top {
		display: flex;
		justify-content: space-between;
		align-items: center;

		p {
			font-size: 21px;
			font-weight: 600;
		}

		span {
			font-size: 17px;
		}

		.el-button {
			margin-right: -50%;
		}
	}

	.content {
		width: 100%;

		// height: 10vh;
		// border:1px solid red;
		.box {
			display: flex;
			align-items: center;
			// border:1px solid red;
			width: 50%;
			margin-top: 2%;

			span {
				font-size: 18px;
			}

			.el-input {
				width: 50%;
			}
		}
	}
	.items{
		width:100%;
		// height:10vh;
		// border:1px solid red;
	}
</style>
<template>
	<div class="top">
		<p>添加新的菜单</p>
		<el-button type="success" @click="add">完成</el-button>
		<span @click="back" style="cursor: pointer;">返回</span>
	</div>
	<div class="content">
		<div class="box">
			<span>菜单名称：</span>
			<el-input placeholder="请输入新的菜单名称" v-model="menuName"></el-input>
		</div>
		<div class="box">
			<span>权限：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
			<el-input v-model="se" placeholder="请选择角色" size="default" style="width: 50%" @click="showDialogFn">
				<!-- <el-option v-for="item in roles" :key="item.roleId" :label="item.roleName" :value="item.roleId" /> -->
			</el-input>
		</div>
		<div class="box">
			<span>访问路径：</span>
			<el-input placeholder="请输入访问路径" v-model="menuPath"></el-input>
		</div>
		<div class="box">
			<span>父级菜单：</span>
			<el-select v-model="menuValue" placeholder="请选择父级菜单" size="default" style="width: 50%">
				<el-option v-for="item in menuList" :key="item.menuId" :label="item.menuName" :value="item.menuId" />
			</el-select>
		</div>
	</div>
	 <el-dialog
	    v-model="dialogVisible"
	    title="Tips"
	    width="500"
	  >
	   <div class="items">
		   <div class="item">
			    <!-- roles:{{roles}} -->
			   <el-checkbox-group v-model="seValue">
			       <!-- <el-checkbox label="Option A" value="Value A" v-for=""/> -->
			      <el-checkbox :label="x.roleName" :value="x.roleId" v-for="x in roles"/>
			     </el-checkbox-group>
		   </div>
	   </div>
	    <template #footer>
	      <div class="dialog-footer">
	        <el-button @click="dialogVisible = false">取消</el-button>
	        <el-button type="primary" @click="Confirm">
	          确定
	        </el-button>
	      </div>
	    </template>
	  </el-dialog>
</template>

<script setup lang="ts">
	import { defineEmits, ref } from "vue";
	import { menuAdd, menuFind, roleList } from "@/api/gh";
	import { ElMessage } from 'element-plus'
	let menuName = ref("")//菜单名称
	let menuPath = ref("")//访问路径
	let pageIndex = ref(1)
	let pageSize = ref(5)
	let dialogVisible =ref(false)
	let roles = ref()
	let se = ref("")
	let menuValue = ref("")
	let menuList = ref([])
	const emit = defineEmits(["che"])
	const back = () => {
		emit("che",'menu')
	}
	let seValue = ref([])
	
	// 点击权限
	const showDialogFn=()=>{
		console.log("1111")
		dialogVisible.value=true
	}

	//获取权限列表
	const getRoleList = async () => {
		let res : any = await roleList(
			{
				pageIndex: pageIndex.value + "",
				pageSize: pageSize.value + ""
			}
		)
		roles.value = res.list
		let data =
			{
				createTime: "2023-12-06 14:20:03",
				delFlag: "0",
				level: 0,
				parentRole: 0,
				roleId: 0,
				roleName: "全部"
			}

		roles.value.unshift(data)
		console.log("权限",roles.value)
	}
	getRoleList()
	//获取所有菜单列表
	const getMenu = async () => {
		let res : any = await menuFind({
			roleIds: [sessionStorage.getItem("roleId")]
		})
		res.unshift({
			childs:null,
			createTime:"2023-12-06 15:08:01",
			delFlag:"0",
			menuId:0,
			menuName:"无",
			pageCount:null,
			parentMenu:"0",
			path:null,
			roleIds:null,
			roles: null
		})
		console.log("菜单列表", res)
		menuList.value = res
	}
	getMenu()
	//添加
	const add = async () => {
		let res = await menuAdd({
			menuName: menuName.value,//	是	String	菜单名
			path: menuPath.value,//	是	String	访问路径
			parentMenu: menuValue.value,	//否	String	父级菜单Id
			roleIds: seValue.value 	//是	list	权限id
		})
		menuName.value=""
		menuPath.value=""
		menuValue.value=""
		 ElMessage({
		    message: '添加成功.',
		    type: 'success',
		  })
		console.log("添加菜单", res)
	}
	const Confirm=()=>{
		dialogVisible.value=false
		// console.log(seValue.value)
		let arr = []
		for(let i=0;i<seValue.value.length;i++){
			// console.log(seValue.value[i])
			for(let j=0;j<roles.value.length;j++){
				if(seValue.value[i]==roles.value[j].roleId){
					arr.push(roles.value[j].roleName)
				}
			}
		}
		let str = ""
		arr.forEach(v=>{
			str=str+v+"/"
		})
		se.value = str
		console.log("Confirm",str)
	}
</script>